import React, { Component } from 'react';
import classnames from 'classnames';
import { Button, Icon, Spin } from 'antd';
import { WeaDialog, WeaUpload, WeaLocaleProvider, WeaTools, WeaFormItem } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;
const callApi = WeaTools.callApi;

const resState = {
    resultVisible: false,
    getResLoading: false, // 获取结果中loading
    resultList: [],
};
export default class ImportEml extends Component {
    constructor(props) {
        super(props);
        this.prefixClass = 'email-list-importEml';
        this.state = {
            fileList: [],
            fileids: [],
            upLoading: false,
            resState,
        };
    }

    // 提交
    submit = () => {
      const { leftMenuName, operateid } = this.props;
        this.setState({ resState: { ...this.state.resState, resultVisible: true } }, () => {
            this.setState({ resState: { ...this.state.resState, getResLoading: true } });
            callApi('/api/email/add/leadEML', 'POST', { fileid: this.state.fileids.join(), leftMenuName, operateid })
            .then((res) => {
                if (res.resultList) {
                    this.setState({ resState: { ...this.state.resState, resultList: res.resultList } });
                }
                this.setState({ resState: { ...this.state.resState, getResLoading: false } });
            });
        });
    }

    onResCancel = () => {
        const { onResCancel } = this.props;
        this.setState({ resState });
        typeof onResCancel === 'function' && onResCancel();
        this.onCancel();
    }

    onCancel = () => {
        const { onCancel } = this.props;
        this.setState({ fileList: [], fileids: [] });
        typeof onCancel === 'function' && onCancel();
    }

    renderResult = () => {
        const { resState: { resultVisible, getResLoading, resultList }, fileList } = this.state;
        const listCls = classnames({
            [`${this.prefixClass}-resultlist`]: true,
            resLoading: getResLoading,
            getWrong: !getResLoading && resultList.length === 0,
        });
        let children = null;
        if (getResLoading) {
            children = <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@wzo0ck`} />;
        } else if (!getResLoading && resultList.length === 0) {
            children = <span>上传文件有误，请重新上传！</span>;
        } else if (!getResLoading && resultList.length > 0) {
            children = (
                <ul>
                    {
                        resultList.map(({ fileid, status }) => {
                            let commonStyle = { color: status === '1' ? 'red' : status === '2' ? '#aaa' : 'green' };
                            let commonStatus = status === '1' ? getLabel(129463, '导入成功') : status === '2' ? getLabel(25021, '文件已存在') : getLabel(31246, '导入失败');
                            for (let file of fileList) {
                                if (file.fileid == fileid) {
                                    return <li style={commonStyle}>{file.filename} {commonStatus}</li>;
                                }
                            }
                        })
                    }
                </ul>
            );
        }
        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@ih58w6`}
              visible={resultVisible}
              title={getLabel(82341, '导入结果')}
              icon="icon-coms-email"
              iconBgcolor="#a0b0ba"
              style={{ width: 400, height: 300 }}
              onCancel={this.onResCancel}
              hasScroll
            >
                <div className={listCls}>
                    {children}
                </div>
            </WeaDialog>
        );
    }

    render() {
        const { visible } = this.props;
        const { fileList, upLoading, resState: { resultVisible } } = this.state;
        const buttons = [<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@p2zq4i@IMPORTEMLsubmit`} type="primary" disabled={fileList.length === 0} onClick={this.submit}>{getLabel(725, '提交')}</Button>];
        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@akd0rc`}
              visible={visible}
              title={getLabel(516481, '导入EML')}
              icon="icon-coms-email"
              iconBgcolor="#a0b0ba"
              style={{ width: 500, height: 400 }}
              className={this.prefixClass}
              buttons={buttons}
              onCancel={this.onCancel}
              hasScroll
            >
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@qq8r5o`}
                  label={getLabel(516482, '上传EML文件')}
                  labelCol={{ span: 6 }}
                  wrapperCol={{ span: 18 }}
                  className={`${this.prefixClass}-form-upload`}
                >
                    <WeaUpload ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@40k7z8`}
                      datas={fileList}
                      uploadUrl="/api/doc/upload/uploadFile"
                      category="string"
                      ref="upload"
                      limitType="eml"
                      onChange={(ids, list) => this.setState({ fileids: ids, fileList: list })}
                      onUploading={status => this.setState({ upLoading: status === 'uploading' })}
                    >
                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@z80f5r`} loading={upLoading}>{getLabel(130171, '请选择文件')}</Button>
                    </WeaUpload>
                </WeaFormItem>
                {
                    fileList && fileList.length > 0 && (
                        <ul className={`${this.prefixClass}-filelist`}>
                            {
                                fileList.map((file) => {
                                    const { filename, fileid } = file;
                                    return (
                                        <li>
                                            <p>
                                                <span>{filename}</span>
                                                <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@odwfm1@IMPORTEML${fileid}`}
                                                  type="cross"
                                                  title={getLabel(91, '删除')}
                                                  onClick={() => this.refs.upload.doDeleteT(fileid)}
                                                />
                                            </p>
                                        </li>
                                    );
                                })
                            }
                        </ul>
                    )
                }
                {resultVisible && this.renderResult()}
            </WeaDialog>
        );
    }
}
/*
  外部调用方式：
  visible: must 控制弹窗显隐
  onCancel: 取消/关闭弹窗回调
  onResCancel: 结果关闭回调
*/
